<template>
    <div class="content-wrapper home">

        <div class="home-header">
            <a href="javascript:;" class="city">
                <div class="van-ellipsis">广州</div>
            </a>
            <div class="header-search">
                <van-search placeholder="请输入商品名称" v-model="keywork"/>
            </div>
            <a href="javascript:;" class="user">
                <van-icon name="contact"/>
            </a>
        </div>

        <div class="swipe-wrapper">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <van-row class="nav-wrapper">
            <van-col span="6">
                <a href="" class="nav-box">
                    <van-icon name="pending-payment" />
                    <span>待付款</span>
                </a>
            </van-col>
            <van-col span="6">
                <a href="" class="nav-box">
                    <van-icon name="pending-orders" />
                    <span>待接单</span>
                </a>
            </van-col>
            <van-col span="6">
                <a href="" class="nav-box">
                    <van-icon name="pending-deliver" />
                    <span>待发货</span>
                </a>
            </van-col>
            <van-col span="6">
                <a href="" class="nav-box">
                    <van-icon name="logistics" />
                    <span>待发货</span>
                </a>
            </van-col>
        </van-row>

        <div>
            <span v-html="showConsole"></span>
        </div>
        <van-button type="default" @click="getCity(location)">默认按钮</van-button>

    </div>
</template>

<script>
    import {Icon, Search, Swipe, SwipeItem, Lazyload, Row, Col, Button} from 'vant'
    import wx from 'weixin-js-sdk'
    import http from '@/utils/http'

    export default {
        name: "Home",
        components: {
            [Icon.name]: Icon,
            [Search.name]: Search,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Lazyload.name]: Lazyload,
            [Row.name]: Row,
            [Col.name]: Col,
            [Button.name]: Button,
        },
        data() {
            return {
                keywork: null,
                images: [
                    'http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200814_5891.jpg',
                    'http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200839_2276.jpg',
                    'http://baixing.kuaihejiu.com/homeFloor/20171205/20171205091256_5917.jpg',
                    'http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200939_2844.jpg'
                ],
                showConsole: null,
                location: '111.017393,21.531189',
                city: null,
                address: null,
            }
        },
        methods: {
            /**
             * 根据坐标获取地址位置，经度在前，纬度在后
             * @param location
             */
            getCity(location) {
                console.log('微信原始坐标：'+location)
                let self = this
                http({
                    //经度在前，纬度在后
                    url: 'http://restapi.amap.com/v3/assistant/coordinate/convert?locations='+location+'&coordsys=gps&key=2b7d6cf58cefb5511c218cf37d776ba0',
                    method: 'get',
                    withCredentials: false
                }).then(response => {
                    if(response.data.info === 'ok') {
                        console.log('转换为高德坐标：' + response.data.locations)

                        AMap.service('AMap.Geocoder',function(){//回调函数
                            //实例化Geocoder
                            var geocoder = new AMap.Geocoder();

                            //使用geocoder 对象完成相关功能
                            geocoder.getAddress(response.data.locations, function (status, result) {
                                if(status === 'complete' && result.info === 'OK') {
                                    self.city = result.regeocode.addressComponent.city.replace('市', '')
                                    self.address = result.regeocode.formattedAddress

                                    self.showConsole += '<br>'+self.city+"<br>"+self.address
                                    console.log(result)
                                }
                            })
                        })
                    }


                })

            }
        },
        created() {
            let self = this
            wx.ready(()=> {
                wx.getLocation({
                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    success: function (res) {
                        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

                        self.getCity(longitude +','+ latitude)

                        self.showConsole = '纬度:' + latitude + '<br>' + '经度:' + longitude
                    }
                });
            })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    //头部搜索输入框
    .header-search {
        .van-search {
            padding: 0;
            margin-top: 10px;
            border-radius: 20px;
            height: 30px;
            .van-field__control{
            }
            .van-icon-search {
                left: 10px;
            }
            .van-search__wrap {
                border-radius: 20px;
                padding-top: 16px;
                .van-search__input {
                    border-radius: 0px;
                }
            }
        }
        .van-cell{
            line-height: 20px;
            border-radius: 20px;
        }
    }
</style>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .home {
        margin-top: 50px;
        position: relative;
        &-header {
            background-color: #f63;
            height: 50px;
            width: 100%;
            position: fixed;
            top: 0;
            color: #fff;
            padding: 0 10px;
            z-index: 111111;
            text-align: center;
            line-height: 50px;
            display: flex;
            flex-direction: row;

            .city {
                position: relative;
                padding-right: 17px;
                .van-ellipsis{
                    width: 60px;
                    max-width: 60px;
                }

                &:after {
                    border: 1px solid #fff;
                    position: absolute;
                    right: 2px;
                    top: 50%;
                    margin-top: -8px;
                    display: block;
                    content: "";
                    width: 8px;
                    height: 8px;
                    border-top: none;
                    border-right: none;
                    transform: rotate(-45deg);
                }
            }

            .header-search {
                width: 100%;
                margin: 0 10px;
                //在全局样式(index.scss)中修改输入框样式
            }

            .user {
                display: block;
                width: 80px;
                padding-right: 15px;
                height: 100%;
                padding-top: 5px;
                font-size: 20px;
            }
        }
    }
    .swipe-wrapper{
        overflow: hidden;
        clear:both;
        .van-swipe{
            height: 180px;
            img{
                width:100%;
            }
        }
    }
    .nav-wrapper{
        padding: 15px 0;
        font-size: 12px;
        text-align: center;
        background-color: #fff;
        a.nav-box{
            .van-icon{
                display: block;
                font-size: 18px;
                margin-bottom: 5px;
                position: relative;
            }
            span{
                display: block;
            }
        }
    }
</style>